<template>
  <div>
    <my-header :showBack="true" title="系统公告"></my-header>
    <div class="notice">
      <van-list v-model="loading" :finished="finished"  @load="loadMore" :offset="20">
        <ul>
          <li v-for="item in noticeList"  class="notice_box" >
            <div class="left_box"></div>
            <section>
              <div class="notice_title">
                <h4>{{item.noticeTitle}}</h4>
                <span>{{item.createTime|formatDate}}</span>
              </div>
              <p v-html="item.noticeContext"></p>
            </section>
          </li>
        </ul>
      </van-list>
    </div>
  </div>
</template>

<script>
import header from "@/components/header";
import timeFormat from "../../store/timeFormat";

export default {
  components: {
    "my-header": header
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy.MM.dd hh:mm");
    }
  },
  data(){
    return{
      noticeList:[],
      loading:false,
      finished:true,
      searchData:{
        pageNo:1,
        pageSize:20,
        type:1
      }
    }
  },
  mounted(){
    this.getNotice();
  },
  methods:{
    getNotice(){
      this.searchData.pageNo = 1;
      this.$ajax(this.$api.selectSysNotice, this.searchData).then(res => {
        if (res.code == 0) {
          if (res.data && res.data.list.length > 0) {
              this.loading = false;
              this.noticeList = res.data.list;
              this.finished = this.searchData.pageNo == res.data.pageCount;
          } else {
            this.noticeList = [];
          }
        }
      });
    },
    loadMore(){
      this.searchData.pageNo += 1;
      this.$ajax(this.$api.selectSysNotice, this.searchData).then(res => {
        if (res.code == 0) {
          if (res.data && res.data.list) {
            this.loading = false;
            this.noticeList = this.noticeList.concat(res.data.list);
            this.finished = this.searchData.pageNo == res.data.pageCount;
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.notice{
  background: #f2f2f2;
  padding-bottom: 10px;
}
.notice_box{
  margin: 15px 15px 0;
  display: flex;
  border-radius: 5px;
  background: #fff;
}
.notice_box span{
  display: block;
  color: #666;
  font-size: 12px;
}
.notice_box p{
  padding: 10px 0;
  color: #666;
  line-height: 20px;
}
.notice_title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px #eee solid;

}
.notice_box section{
  flex: 1;
  margin: 0 20px;
}
.left_box{
  max-width: 5px;
  background: #39d0e6;
  flex: 1;
  border-radius: 5px 0 0 5px;
}
</style>
